<template>
  <el-dialog
    draggable
    overflow
    :title="titleMap[mode]"
    v-model="visible"
    :width="1010"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px">
      <el-row justify="space-evenly">
        <el-col :span="24">
          <el-descriptions title="订单信息" :column="3" border label-align="right">
            <el-descriptions-item>
              <template #label>加工厂</template>
              {{ form.outfactory.name }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>产品</template>
              {{ form.material.spec }} {{ form.material.name }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>形态</template>
              {{ form.type.name }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>计划数</template>
              {{ form.oldmaterial_quantity }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>计划单价</template>
              {{ form.oldprice }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>剩余原料</template>
              {{ form.summary_storage.available_quantity }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>备注</template>
              {{ form.remark }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <el-row justify="space-evenly">
        <el-col :span="24">
          <el-form :model="form" :rules="rules" ref="dialogForm" label-width="0">
            <el-descriptions title="生产信息" :column="4" border>
              <el-descriptions-item label="形态" min-width="100">
                <skDicSelect
                  v-model="form.outtype_id"
                  :code="'type'"
                  :placeholder="'请选择形态'"
                  :editsource="'default'"
                >
                </skDicSelect>
              </el-descriptions-item>
              <el-descriptions-item label="批号" min-width="100">
                <skAutoChoose v-model="form.lot_name" :name="'lot'" :browserShow="false">
                </skAutoChoose>
              </el-descriptions-item>
              <el-descriptions-item label="颜色" min-width="100">
                <skAutoChoose
                  v-model="form.color.name"
                  :name="'color'"
                  :assign="form"
                  :browserShow="false"
                >
                </skAutoChoose>
              </el-descriptions-item>
              <el-descriptions-item label="缸号" min-width="100">
                <el-input v-model="form.dyelot"></el-input>
              </el-descriptions-item>
              <el-descriptions-item label="材料出库" min-width="100">
                <el-input v-model="form.material_quantity" @keyup="setAmount">
                  <template #prepend>
                    <el-input
                      v-model="form.material_auxiliary_quantity"
                      @keyup="setMaterialQuantity"
                      placeholder="包数"
                    />
                  </template>
                </el-input>
              </el-descriptions-item>
              <el-descriptions-item label="成品入库" min-width="100">
                <el-input v-model="form.quantity" @keyup="setAmount">
                  <template #prepend>
                    <el-input
                      v-model="form.auxiliary_quantity"
                      @keyup="setQuantity"
                      placeholder="包数"
                    />
                  </template>
                </el-input>
              </el-descriptions-item>
              <el-descriptions-item label="单价" min-width="100">
                <el-input v-model="form.price" @keyup="setAmount"></el-input>
              </el-descriptions-item>
              <el-descriptions-item label="金额" min-width="100">
                <el-input v-model="form.amount" @keyup="setPrice"></el-input>
              </el-descriptions-item>

              <el-descriptions-item label="运输单" min-width="100">
                <skAutoChoose
                  v-model="form.car.code"
                  :name="'car'"
                  :assign="form"
                  @select="selectCar"
                >
                </skAutoChoose>
              </el-descriptions-item>
              <el-descriptions-item label="运输商/费用" min-width="100">
                <el-row>
                  <el-col :span="12">
                    <skAutoChoose
                      v-model="form.car.company.name"
                      :name="'company'"
                      :assign="form.car"
                      :params="[{ category_id: 54 }]"
                    >
                    </skAutoChoose>
                  </el-col>
                  <el-col :span="12">
                    <el-input v-model="form.car.amount" placeholder="运费" />
                  </el-col>
                </el-row>
              </el-descriptions-item>

              <template #extra>
                <el-button type="danger" :loading="isSaveing" @click="submit()"
                  >保存</el-button
                >
              </template>
            </el-descriptions>
          </el-form>
        </el-col>
      </el-row>
      <sc-VxeTable
        ref="xGrid1"
        :gridEvts="gridEvents"
        :gridOps="gridSubOpts"
        :tablecode="'pro_outsourcing_product2'"
        :url="$API.pro.outsourcing.product.list"
        :params="[{ code: form.code + '_' + form.id }]"
      >
      </sc-VxeTable>
    </el-form>
  </el-dialog>
  <SaveDialog
    v-if="dialog"
    ref="saveDialog"
    @closed="dialog = false"
    @success="handleSuccess"
  ></SaveDialog>
</template>
<script>
import tool from "@/utils/tool";
import skDicSelect from "@/components/skDicSelect";
import skAutoChoose from "@/components/skAutoChoose";
import SaveDialog from "./save";
import XEUtils from "xe-utils";
export default {
  emits: ["success", "closed"],
  components: { skAutoChoose, skDicSelect, SaveDialog },
  data() {
    return {
      mode: "add",
      dialog: false,
      form: {
        material: {},
        color: {},
        lot_name: "",
        car: { company: {} },
        bom: {},
        outfactory: {},
        details: [],
        attachments: [],
        material_quantity: 0,
        material_auxiliary_quantity: 0,
        outtype_id: null,
      },

      gridSubOpts: {
        height: 350,
      },
      titleMap: {
        add: "新增",
        edit: "编辑",
      },
      rules: {},
      visible: false,
      isSaveing: false,
      tableData: [],
      gridEvents: {
        add: () => {
          this.dialog = true;
          this.$nextTick(() => {
            this.$refs.saveDialog.setData(this.form);
            this.$refs.saveDialog.open();
          });
        },
        edit: ({ button }) => {
          this.edit(button.selectRecords[0]);
        },
      },
    };
  },
  mounted() {},
  methods: {
    edit(data) {
      this.dialog = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.setData(this.form, data);
        this.$refs.saveDialog.open("edit");
      });
    },
    selectCar(data) {
      if (typeof data.code == "undefined") {
        data = { company: {} };
        this.form.car_id = 0;
      }
      this.form.car = data;
    },
    setMaterialQuantity() {
      this.form.material_quantity = this.form.material_auxiliary_quantity * 25;
      this.form.auxiliary_quantity = this.form.material_auxiliary_quantity;
      this.setQuantity();
    },
    setQuantity() {
      this.form.quantity = this.form.auxiliary_quantity * 25;
      this.setAmount();
    },
    setAmount() {
      this.form.amount = this.form.quantity * this.form.price;
    },
    setPrice() {
      this.form.price = this.form.amount / this.form.quantity;
    },
    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async valid => {
        if (valid) {
          this.isSaveing = true;
          var res = await this.$API.pro.outsourcing.product.save.post({
            amount: this.form.amount,
            auxiliary_quantity: this.form.auxiliary_quantity,
            billdate: XEUtils.toDateString(new Date(), "yyyy-MM-dd"),
            bom_id: this.form.bom_id,
            code: this.form.code + "_" + this.form.id,
            color_id: this.form.color_id,
            lot_name: this.form.lot_name,
            material_id: this.form.material_id,
            outfactory_id: this.form.outfactory_id,
            price: this.form.price,
            quantity: this.form.quantity,
            car_id: this.form.car_id,
            car: this.form.car,
            iscustomer: this.form.iscustomer,
            customer_id: this.form.customer_id,
            dyelot: this.form.dyelot,
            type_id: this.form.outtype_id,
            details: [
              {
                color_id: this.form.color_id,
                material_id: this.form.material_id,
                type_id: this.form.type_id,
                quantity: this.form.material_quantity,
                rate:
                  this.form.quantity == 0
                    ? 0
                    : (this.form.material_quantity / this.form.quantity) * 100,
                dyelot: this.form.dyelot,
              },
            ],
          });
          this.isSaveing = false;
          if (res.code == 200) {
            this.handleSuccess();
            this.$message.success("操作成功");
          }
        }
      });
    },
    handleSuccess() {
      this.$refs.xGrid1.refresh();
    },
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;
      return this;
    },

    //表单注入数据
    setData(data) {
      delete data.car;
      delete data.car_id;
      Object.assign(this.form, tool.removeNull(data));
      this.form.oldprice = this.form.price;
      this.form.oldmaterial_quantity = this.form.material_quantity;

      this.form.quantity = this.form.material_quantity = this.form.auxiliary_quantity = 0;
    },
  },
};
</script>

<style>
.attachments .el-upload--picture-card,
.attachments .el-upload-list--picture-card .el-upload-list__item {
  width: 100px;
  height: 100px;
  overflow: hidden;
}
</style>
